<template>
  <div class="content">
    <ul class="top">
      <li>
        <div class="time">
          <span><img src="./images/time.svg">4月18日</span>
        </div>
        <ul>
          <li class="item clearfix">
            <div class="item-img">
              <img src="./images/coll.png">
            </div>
            <div class="item-desc">
              <div class="name">
                百特纯酿干红葡萄酒（带盒）750ml

              </div>
              <div class="operate">
                <span>会员价：¥788</span>
                <span>加入购物车</span>
              </div>
            </div>
          </li>
          <li class="item clearfix">
            <div class="item-img">
              <img src="./images/coll.png">
            </div>
            <div class="item-desc">
              <div class="name">
                百特纯酿干红葡萄酒（带盒）750ml

              </div>
              <div class="operate">
                <span>会员价：¥788</span>
                <span>加入购物车</span>
              </div>
            </div>
          </li>
        </ul>
      </li>
      <li>
        <div class="time">
          <span><img src="./images/time.svg">4月18日</span>
        </div>
        <ul>
          <li class="item clearfix">
            <div class="item-img">
              <img src="./images/coll.png">
            </div>
            <div class="item-desc">
              <div class="name">
                百特纯酿干红葡萄酒（带盒）750ml

              </div>
              <div class="operate">
                <span>会员价：¥788</span>
                <span>加入购物车</span>
              </div>
            </div>
          </li>
          <li class="item clearfix">
            <div class="item-img">
              <img src="./images/coll.png">
            </div>
            <div class="item-desc">
              <div class="name">
                百特纯酿干红葡萄酒（带盒）750ml

              </div>
              <div class="operate">
                <span>会员价：¥788</span>
                <span>加入购物车</span>
              </div>
            </div>
          </li>
          <li class="item clearfix">
            <div class="item-img">
              <img src="./images/coll.png">
            </div>
            <div class="item-desc">
              <div class="name">
                百特纯酿干红葡萄酒（带盒）750ml

              </div>
              <div class="operate">
                <span>会员价：¥788</span>
                <span>加入购物车</span>
              </div>
            </div>
          </li>
        </ul>
      </li>
    </ul>

  </div>
</template>

<script>
  export default {
    components: {},
    data(){
      return {};
    },
    mounted(){

    },
    methods: {},
    filters: {}
  }
</script>

<style scoped>
  .content {
    text-align: left;
  }

  .top {
    padding: .75rem .25rem;
  }

  ul li {
    margin-left: .5rem;
    border-left: 1px solid #bbb;
    height: 100%;
  }

  .time {
    position: relative;
    left: -.45rem;
    font-size: .7rem;
    color: #555;

  }

  .item {
    margin: .5rem .75rem;
    padding: .5rem;
    background: #fff;
    border: 1px solid #fff;
    border-radius: .2rem;
  }

  .item .item-img {
    float: left;
    width: 28%;
  }

  .item-img img {
    width: 100%;
    height: 100%;
  }

  .time img {
    vertical-align: middle;
    margin-right: .25rem;
    margin-bottom: .1rem;
  }

  .item-desc {
    float: left;
    width: 70%;
    margin-top: .5rem;
  }

  .item-desc .name {
    font-size: .7rem;
    color: #333333;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .item-desc .operate {
    margin-top: .5rem;
  }

  .item-desc .operate span:first-child {
    font-size: .65rem;
    color: #F74C4E;
    margin: .5rem .75rem 0 0;
  }

  .item-desc .operate span:last-child {
    font-size: .55rem;
    color: #fff;
    background: #E93B3D;
    border: 1px solid #E93B3D;
    border-radius: 5rem;
    padding: .25rem .5rem;
  }

</style>
